<template>
    <div class="login">
        <div class="login-logo">
            <img src="../../assets/images/logo.png" alt="" />
        </div>
        <div class="login-content">
            <!-- <div class="login-input">
                <input type="text" v-model="mobile" :placeholder="$t('login.doc85')" />
            </div>
            <div class="login-input">
                <input type="password" maxlength="20" v-model="pasword"
                    :placeholder="$t('new.doc20')" />
            </div> -->
            <div class="loginItem">
                <p>{{$t('login.doc87')}}</p>
                <input type="text" v-model="mobile" :placeholder="$t('login.doc85')">
            </div>
            <div class="loginItem">
                <p>{{$t('login.doc88')}}</p>
                <input class="passwordInput" :type="passwordType" v-model="pasword" :placeholder="$t('new.doc20')">
                <div class="showBtn" @click="switchPasswordType">
                    <van-icon name="eye" color="#000000" v-if="passwordType == 'password'"></van-icon>
                    <van-icon name="closed-eye" color="#000000" v-else></van-icon>
                </div>
            </div>
        </div>
        <div class="login-btn flexcenter" @click="handlerLogin" :class="{ btnact: mobile != '' && pasword != '' }">
            {{
                    $t('title.login')
            }}</div>
        <div class="login-tips">
            {{ $tc('login.go_reg', 1) }}
            <span @click="$router.push('/register')">{{ $tc('login.go_reg', 2) }}</span>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            pasword: '',
            passwordType: 'password',
            isbtn: true
        }
    },
    mounted() {

    },
    methods: {
        handlerLogin() {
            let _this=this;
            if (this.mobile != '' && this.pasword != '' && this.isbtn) {
                this.isbtn = false;
                let loginPassword = this.pasword.toString();
                this.$post(this.URL.user.login, {
                    accountType: 2,
                    account: this.mobile,
                    code: this.$md5(loginPassword)
                }).then(res => {
                    if (res.code == 0) {
                            this.$toast.success(this.$t("login.login_successed"));

                             localStorage.setItem('token',res.data.token)
                        setTimeout(() =>{
                            _this.$router.push('/home')
                        })
                    } else {
                        this.isbtn = true;
                        this.$toast(res.message);
                    }
                })
            }
        },
        switchPasswordType() {
            this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    .login-logo {
        padding: 1rem 0;
        text-align: center;

        img {
            height: 1.79rem;
        }
    }

    .login-tab {
        padding: 0 .6rem;
        display: flex;

        div {
            flex: 0 0 50%;
            padding-bottom: .2rem;
            font-size: .34rem;
            color: #999999;
            text-align: center;
        }

        .act {
            position: relative;
            color: #2A64E4;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0.46rem;
                height: 0.06rem;
                background: #2a64e4;
                transform: translateX(-50%);
            }
        }
    }

    .login-content {
        padding: 0.5rem .6rem .7rem;

        .login-input {
            padding: 0 .26rem;
            height: .96rem;
            border: 0.02rem solid #172941;background: #172941;
            border-radius: .16rem;
            box-sizing: border-box;
            display: flex;
          input {background: none;}

            &:first-child {
                margin-bottom: .16rem;
            }

            &:hover {
                border: 0.02rem solid #1f304a;
            }

            input {
                flex: 1;
                border: 0;
                height: .92rem;
                font-size: .3rem;

                &::placeholder {
                    color: #B0B3BE;
                }
            }

            .mobile-code {
                font-size: .32rem;
                color: #333333;
                line-height: .92rem;
                display: flex;

                img {
                    width: 0.22rem;
                    height: 0.14rem;
                    margin: .4rem 0 0 .16rem;
                }
            }

            .send-code {
                font-size: .28rem;
                color: #B0B3BE;
                line-height: .94rem;
            }
        }
        .loginItem{
            position: relative;
            display: flex;
            flex-direction: column;
            margin-bottom: .6rem;
            p{
                color: #333333;
                margin-bottom: .16rem;
            }
            input {
                color: #333333;
                height: .48rem;
                background: none;
                border: none;
                border-bottom: 1px solid #D1D4D9;
                &::placeholder {
                    color: #B0B3BE;
                }
            }
        }
        .showBtn{
            position: absolute;
            top: .6rem;
            right: .08rem;
        }
    }

    .login-btn {
        width: 6.3rem;
        height: 0.96rem;
        margin: 0 auto;
        background: #E9EAED;
        border-radius: 0.16rem;
        font-size: .32rem;
        color: #FFFFFF;
    }

    .btnact {
        background: #713FF5;
        color: #fff;
    }

    .login-tips {
        margin-top: .4rem;
        text-align: center;
        font-size: .28rem;
        color: #666;

        span {
          color: #999;
        }
    }
}
</style>
